<template>
  <div class="home-container">
    <el-carousel indicator-position="outside">
      <el-carousel-item class="item" v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
  export default {
    data () {
      return {}
    },
    mounted () {
    }
  }
</script>


<style lang="less" rel="stylesheet/less" scpoed>
  .home-container {
    .item {
      text-align: center;
      vertical-align: middle;
      &:nth-child(2n) {
        background-color: #99a9bf;
      }
      &:nth-child(2n+1) {
        background-color: #d3dce6;
      }
    }
  }
</style>
